<template>
  <div class="icon-div">
    <label>选择列：</label>
    <a-icon type="database" @click="showColumn = !showColumn" />
    <div class="select-box" style="z-index: 10" v-if="showColumn">
        <div style="position: relative;">
            <a-checkbox-group v-model="selectNow">
                <a-row v-for="(item,index) in columns" style="margin: 0 10px 10px 10px">
                    <a-checkbox :value="item.dataIndex">
                      {{item.title}}
                    </a-checkbox>
                </a-row>
            </a-checkbox-group>
            <div class="select-ope">
                <span class="confirm" @click="confirmSelect()" style="border-right: solid 1px #dedede">确定</span>
                <span @click="showColumn = !showColumn">取消</span>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
    data () {
        return {
            showColumn:false,
            historySelect:[],
            selectNow:[]
        }
    },
    watch: {
        showColumn(newVal,oldVal){
            if(newVal){
                this.selectInit();
            }
        }
    },
    computed: {
        
    },
    props: {
        columns: {
            type: Array,
        },
    },
    mounted () {
        this.selectInit();
        this.confirmSelect();
    },
    methods: {
        selectInit(){
            let arr = [];
            this.columns.forEach((e)=>{
                arr.push(e.dataIndex)
            })
            this.selectNow = localStorage.getItem(this.$route.path+'-table')?JSON.parse(localStorage.getItem(this.$route.path+'-table')):arr;
        },
        confirmSelect(){
            localStorage.setItem(this.$route.path+'-table',JSON.stringify(this.selectNow));
            
            let newColumns = [];
            newColumns = this.columns.filter((e)=>{
                if(this.selectNow.some((item,index)=>{return item == e.dataIndex})){
                    return e
                }
            })
            this.$emit('chooseFields',newColumns)
            this.showColumn = false;
        }
    }
}
</script>
<style>
    .icon-div{
        float: right;
        width: 100px;
        text-align: right;
    }
    .icon-div > i{
        cursor: pointer;
    }
    .select-box{
        position: absolute;
        background-color: #fff;
        box-shadow:1px 1px 11px #666;
        right:10px;
        width: 180px;
        padding: 10px 0px 40px 0px;
        border-radius:5px;
        z-index:5;
        text-align: left;
        top:35px;
    }
    .select-box >div{

    }
    .select-ope{
        position: absolute;
        bottom:-40px;
        left: 0px;
        width:100%;
        border-top:solid 1px #dedede;
        height:40px;
        line-height: 40px;
    }
    .select-ope span{
        display: inline-block;
        width:50%;
        text-align: center;
        cursor: pointer;
    }
    .select-ope .confirm{
        background-color: #1890FF;
        color: #fff;
        border-bottom-left-radius: 5px;
    }
</style>
